<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登陆页面</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css" media="all">
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/static/css/layui/layui.js"></script>
    <script>
        $(function(){
            //得到焦点
            $("#password").focus(function(){
                $("#left_hand").animate({
                    left: "150",
                    top: " -38"
                },{step: function(){
                        if(parseInt($("#left_hand").css("left"))>140){
                            $("#left_hand").attr("class","left_hand");
                        }
                    }}, 2000);
                $("#right_hand").animate({
                    right: "-64",
                    top: "-38px"
                },{step: function(){
                        if(parseInt($("#right_hand").css("right"))> -70){
                            $("#right_hand").attr("class","right_hand");
                        }
                    }}, 2000);
            });
            //失去焦点
            $("#password").blur(function(){
                $("#left_hand").attr("class","initial_left_hand");
                $("#left_hand").attr("style","left:100px;top:-12px;");
                $("#right_hand").attr("class","initial_right_hand");
                $("#right_hand").attr("style","right:-112px;top:-12px");
            });
        });

        layui.use('form',function () {
           var form=layui.form;
           form.verify({
               workerId:function (value) {
                   if(value.length<6){
                       return '工号不符合规则';
                   }
               },
               password:[/(.+){6,12}$/, '密码必须6到12位']
           });

           form.on('submit(check)',function () {
               return true;
           })
        });
    </script>
</head>
<body>
   <div class="login_top">
   </div>
   <div class="login_body">
     <form class="layui-form" action="${pageContext.request.contextPath}/worker/login" method="post">
           <div class="form_top">
               <div class="tou"></div>
               <div class="initial_left_hand" id="left_hand">
               </div>
               <div class="initial_right_hand" id="right_hand">
               </div>
           </div>

           <div class="form_body">
               <div class="layui-form-item">
                   <label class="layui-form-label">工号:</label>
                   <div class="layui-input-block">
                       <input id="workId" type="text" lay-verify="workerId" name="workerId" value="${worker.workerId}" placeholder="请输入工号" class="layui-input text_length"/>
                   </div>
               </div>
               <div class="layui-form-item">
                   <label class="layui-form-label">密码:</label>
                   <div class="layui-input-block">
                       <input id="password" type="password" lay-verify="password" name="password" value="${worker.password}" placeholder="密码" class="layui-input text_length"/>
                   </div>
               </div>

               <div class="layui-form-item">
                   <label class="tip"><c:if test="${errorMsg!=null}">Tip:${errorMsg}</c:if></label>
                   <button class="layui-btn" lay-submit="" lay-filter="check" style="float: right;margin-right: -35px">登录</button>
               </div>
           </div>

     </form>
   </div>

    <div class="foot">
        <jsp:include page="${pageContext.request.contextPath}/WEB-INF/page/commonPage/foot.jsp"/>
    </div>

</body>
</html>
